<template>
	<view class="start-index">
		<!-- 首页 -->
		<view v-if="tabberPageLoadFlag[0]" :style="{display: currentIndex === 0 ? '' : 'none'}">
			<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
				<Home ref="home"></Home>
			</scroll-view>
		</view>
		<!-- 奖励 -->
		<view v-if="tabberPageLoadFlag[1]" :style="{display: currentIndex === 1 ? '' : 'none'}">
			<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
				<Reward ref="reward"></Reward>
			</scroll-view>
		</view>
		<!-- 题库 -->
		<view v-if="tabberPageLoadFlag[2]" :style="{display: currentIndex === 2 ? '' : 'none'}">
			<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
				<Question ref="question"></Question>
			</scroll-view>
		</view>
		<!-- 我的 -->
		<view v-if="tabberPageLoadFlag[3]" :style="{display: currentIndex === 3 ? '' : 'none'}">
			<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
				<Mine ref="mine"></Mine>
			</scroll-view>
		</view>
		<!-- 底部导航 -->
		<tn-tabbar-big v-model="currentIndex" :list="tabbarList" activeColor="#4F98DC" inactiveColor="#303132"
			activeIconColor="#4F98DC" inactiveIconColor="#303132CC" :animation="true" :safeAreaInsetBottom="true"
			@change="switchTabbar">

		</tn-tabbar-big>
	</view>
</template>

<script>
	import Home from '@/pages/home/index.vue'
	import Reward from '@/pages/reward/index.vue'
	import Question from '@/pages/question/index.vue'
	import Mine from '@/pages/mine/index.vue'

	export default {
		components: {
			Home,
			Reward,
			Question,
			Mine
		},
		data() {
			return {
				// 底部tabbar菜单数据
				tabbarList: [{
						title: '首 页',
						activeIcon: 'home-capsule-fill',
						inactiveIcon: 'home-capsule'
					},
					{
						title: '题友记',
						activeIcon: 'receipt-fill',
						inactiveIcon: 'receipt',
					},
					{
						title: 'AI助手',
						activeIcon: 'ai-fill',
						inactiveIcon: 'ai',
					},
					{
						title: '我 的',
						activeIcon: 'my-lack-fill',
						inactiveIcon: 'my-lack'
					}
				],
				// tabbar当前被选中的序号
				currentIndex: 0,
				// 自定义底栏对应页面的加载情况
				tabberPageLoadFlag: []
			}
		},
		onLoad(options) {
			const sharePid = options.pid;
			uni.setStorageSync('sharePid', sharePid);
			const index = Number(options.index || 0);
			this.tabberPageLoadFlag = this.tabbarList.map((item, tabbar_index) => {
				return index === tabbar_index;
			});
			this.switchTabbar(index);
		},
		methods: {
			switchTabbar(index) {
				this._switchTabbarPage(index);
				//this.$store.dispatch('GetInfo');
			},

			// 瀑布流导航页面滚动到底部
			tabbarPageScrollLower(e) {
				// 可根据需要实现特定逻辑
			},

			// 切换导航页面
			_switchTabbarPage(index) {
				const selectPageFlag = this.tabberPageLoadFlag[index];
				if (selectPageFlag === undefined) {
					return;
				}
				if (selectPageFlag === false) {
					this.tabberPageLoadFlag[index] = true;
				}
				this.currentIndex = index;
				this.$nextTick(() => {
					// 调整题库页面的引用索引（从3变为2）
					if (index === 2) {
						this.$refs.question.diyOnShow();
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
</style>